<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 	 xmlns:h="http://java.sun.com/jsf/html"      
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui"
     xmlns:c="http://java.sun.com/jsp/jstl/core"
     xmlns:ui="http://java.sun.com/jsf/facelets"
	 template="index.xhtml">
 <ui:define name="body">
 <script type="text/javascript">
	$(document).ready(function(){		
			$(".submenu-active").removeClass('submenu-active');
			$("#nomenclature").addClass('submenu-active');
// 			jQuery('input[id*="quantity"]')
// 			alert(jQuery('input[id*="quantity"]').val());
		});
	</script>
   	   <f:view>

 <h1>NOMENCLATURE</h1>
 <br></br>
	<h3> <h:outputText value="#{levelNomencMB.titleOfStructure}"/></h3>
 <br></br>
 
   <h:form id="form" >     

      <table class="no_border">
          <tr>
           <c:if test="${levelNomencMB.levelofNomenclature != 2}">
              <td class="no_padding">
                 <center>  <p:commandButton value="Ajouter" oncomplete="addSecteur.show()" style="font-size: 0.9em" />  </center>
                 <br></br>
                 <p:dataTable id="idlevelOneTable" 
                 			  var="levelOneRow" 
                 			  value="#{levelNomencMB.levelOne}"
                 			  rowKey="#{levelOneRow.nom}" 
                 			  selection="#{levelNomencMB.selectedLevelOne}"
                 			  selectionMode="single"
                 			  paginator="true" 
                 			  paginatorPosition="bottom" 
                 			  rows="10" 
       						  style="width:250px;border:0;">   
       			   
       			  <c:if test="${levelNomencMB.levelofNomenclature == 3}"> 
			       	 <p:ajax  event="rowSelect"  listener="#{levelNomencMB.onRowSelected}" update=":form:idLevelTwoTable :form:idLevelFourTable " />  
				  </c:if>
				  
				  <c:if test="${levelNomencMB.levelofNomenclature == 4}"> 
			       	 <p:ajax  event="rowSelect"  listener="#{levelNomencMB.onRowSelected}" update=":form:idLevelTwoTable :form:idLevelThreeTable :form:idLevelFourTable" />  
				  </c:if>
				  
				  <c:if test="${levelNomencMB.levelofNomenclature == 5}"> 
			       	 <p:ajax  event="rowSelect"  listener="#{levelNomencMB.onRowSelected}" update=":form:idLevelTwoTable :form:idLevelThreeTable :form:idLevelFourTable :form:idLevelFiveTable" />  
				  </c:if>
				  
			        <p:columnGroup type="header">  
			           <p:row>  
			                <p:column colspan="2" headerText="#{levelNomencMB.titleLevelOne}" style="text-align:left"/>  
			           </p:row>
			        </p:columnGroup>       
			        
			        <p:column style="width:110px">  
    			         <h:outputText value="#{levelOneRow.nom}" />
			        </p:column>  
			        
			        <p:column style="width:25px;">  
			          		 <p:commandButton  id="editLevelOne"  style="width:20px;height:20px" icon="ui-icon-pencil" title="Editer" onclick="editSecteur.show()" >  
			                     <f:setPropertyActionListener value="#{levelOneRow}" target="#{levelNomencMB.selectedLevelOne}" />  
			                 </p:commandButton>  
			                 
			                 <p:commandButton id="deleteLevelOne" style="width:20px;height:20px" title="Supprimer"  icon="ui-icon-circle-close" onclick="deleteLevelOneValidationDialog.show()">  
			                     <f:setPropertyActionListener value="#{levelOneRow}" target="#{levelNomencMB.selectedLevelOne}" />  
			                 </p:commandButton>  
			        </p:column>  
    			 </p:dataTable>
               </td>
                 </c:if>
               <td class="no_padding">
                  <center>  <p:commandButton value="Ajouter" style="font-size: 0.9em" oncomplete="addRayon.show()" />  </center>
                  <br></br>
                <p:dataTable  id="idLevelTwoTable" 
                 			  widgetVar="levelTwoTable"
                 			  var="levelTwo" 
                 			  value="#{levelNomencMB.levelTwo}"
                 			  rowKey="#{levelTwo.id}" 
                 			  selection="#{levelNomencMB.selectedLevelTwo}"
                 			  selectionMode="single"
                 			  paginator="true" 
                 			  paginatorPosition="bottom" 
                 			  rows="10" 
       						  style="width:250px;border:0;">  
       						   
       			  <c:if test="${levelNomencMB.levelofNomenclature == 2 or levelNomencMB.levelofNomenclature == 3}"> 
			       	 <p:ajax  event="rowSelect"  listener="#{levelNomencMB.onRowSelected}" update=":form:idLevelFourTable" />  
				  </c:if>	
				  		  
				  <c:if test="${levelNomencMB.levelofNomenclature == 4}"> 
			       	 <p:ajax  event="rowSelect"  listener="#{levelNomencMB.onRowSelected}" update=":form:idLevelThreeTable :form:idLevelFourTable" />  
				  </c:if>
				  
				  <c:if test="${levelNomencMB.levelofNomenclature == 5}"> 
			       	 <p:ajax  event="rowSelect"  listener="#{levelNomencMB.onRowSelected}" update=" :form:idLevelThreeTable :form:idLevelFourTable :form:idLevelFiveTable" />  
				  </c:if>
       						  
			        <p:columnGroup type="header">  
			           <p:row>  
			                <p:column colspan="2"  style="text-align:left" headerText="#{levelNomencMB.titleLevelTwo}" />  
			           </p:row>
			        </p:columnGroup>       
			        
			        <p:column style="width:110px">  
			    	    <h:outputText value="#{levelTwo.nom}" />  
			        </p:column>  
			        
			        <p:column style="width:25px;">  
			          		 <p:commandButton  style="width:20px;height:20px" id="editLevelTwo"   icon="ui-icon-pencil" title="Editer">  
			                     <f:setPropertyActionListener value="#{levelTwo}" target="#{levelNomencMB.selectedLevelTwo}" />  
			                 </p:commandButton>  
			                 <p:commandButton id="deleteLevelTwo" style="width:20px;height:20px" title="Supprimer"  icon="ui-icon-circle-close" onclick="deleteLevelTwoValidationDialog.show()">  
			                     <f:setPropertyActionListener value="#{levelTwo}" target="#{levelNomencMB.selectedLevelTwo}" />  
			                 </p:commandButton>  
			        </p:column>  
    			 </p:dataTable>
                 </td>
                <c:if test="${levelNomencMB.levelofNomenclature == 4 or levelNomencMB.levelofNomenclature == 5 }">
                 <td class="no_padding">
                  <center>  <p:commandButton value="Ajouter" style="font-size: 0.9em" oncomplete="addSousRayon.show()" />  </center>
                  <br></br>
                 <p:dataTable id="idLevelThreeTable" 
                 			  widgetVar="levelThreeTable"
                 			  var="levelThree" 
                 			  value="#{levelNomencMB.levelThree}"
                 			  rowKey="#{levelThree.id}" 
                 			  selection="#{levelNomencMB.selectedLevelThree}"
                 			  selectionMode="single"
                 			  paginator="true" 
                 			  paginatorPosition="bottom" 
                 			  rows="10" 
       						  style="width:250px;border:0;">  
       						   
				  		  
				  <c:if test="${levelNomencMB.levelofNomenclature == 4}"> 
			       	 <p:ajax  event="rowSelect"  listener="#{levelNomencMB.onRowSelected}" update=":form:idLevelFourTable" />  
				  </c:if>
				  
				  <c:if test="${levelNomencMB.levelofNomenclature == 5}"> 
			       	 <p:ajax  event="rowSelect"  listener="#{levelNomencMB.onRowSelected}" update=":form:idLevelFourTable :form:idLevelFiveTable" />  
				  </c:if>
				  
			        <p:columnGroup type="header">  
			           <p:row>  
			                <p:column colspan="2"  style="text-align:left" headerText="#{levelNomencMB.titleLevelThree}" />  
			           </p:row>
			        </p:columnGroup>       
			        
			        <p:column style="width:110px">  
			    	    <h:outputText value="#{levelThree.nom}" />  
			        </p:column>  
			        
			        <p:column style="width:25px;">  
			          		 <p:commandButton  style="width:20px;height:20px" id="editLevelThree"   icon="ui-icon-pencil" title="Editer">  
			                     <f:setPropertyActionListener value="#{levelThree}" target="#{levelNomencMB.selectedLevelThree}" />  
			                 </p:commandButton>  
      						 <p:commandButton id="deleteLevelThree" style="width:20px;height:20px" title="Supprimer"  icon="ui-icon-circle-close" onclick="deleteLevelThreeValidationDialog.show()">  
			                     <f:setPropertyActionListener value="#{levelThree}" target="#{levelNomencMB.selectedLevelThree}" />  
			                 </p:commandButton>  			        
                   </p:column>
                     
    			 </p:dataTable>
                 </td>
                 </c:if>  
                 <td class="no_padding">
                  <center>  <p:commandButton value="Ajouter" style="font-size: 0.9em" oncomplete="addFamille.show()" />  </center>
                  <br></br>
 				<p:dataTable  id="idLevelFourTable" 
                 			  widgetVar="levelFourTable"
                 			  var="levelFour" 
                 			  value="#{levelNomencMB.levelFour}"
                 			  rowKey="#{levelFour.id}" 
                 			  selection="#{levelNomencMB.selectedLevelFour}"
                 			  selectionMode="single"
                 			  paginator="true" 
                 			  paginatorPosition="bottom" 
                 			  rows="10" 
       						  style="width:250px;border:0;">   

			        <p:columnGroup type="header">  
			           <p:row>  
			                <p:column colspan="2"  style="text-align:left" headerText="#{levelNomencMB.titleLevelFour}" />  
			           </p:row>
			        </p:columnGroup>       
			        
			        <p:column style="width:110px">  
			    	    <h:outputText value="#{levelFour.nom}" />  
			        </p:column>  
			        
			        <p:column style="width:25px;">  
			          		 <p:commandButton  style="width:20px;height:20px" id="editLevelFour"   icon="ui-icon-pencil" title="Editer">  
			                     <f:setPropertyActionListener value="#{levelFour}" target="#{levelNomencMB.selectedLevelFour}" />  
			                 </p:commandButton>  
       						 
       						 <p:commandButton id="deleteLevelFour" style="width:20px;height:20px" title="Supprimer"  icon="ui-icon-circle-close" onclick="deleteLevelFourValidationDialog.show()">  
			                     <f:setPropertyActionListener value="#{levelFour}" target="#{levelNomencMB.selectedLevelFour}" />  
			                 </p:commandButton>  			        
  
			        </p:column>  
    			 </p:dataTable>
                 </td>
               <c:if test="${levelNomencMB.levelofNomenclature == 5}">      
              <td class="no_padding">
                  <center>  <p:commandButton value="Ajouter" style="font-size: 0.9em" oncomplete="addSousFamille.show()" />  </center>
                  <br></br>
   				<p:dataTable  id="idLevelFiveTable" 
                 			  widgetVar="levelFiveTable"
                 			  var="levelFive" 
                 			  value="#{levelNomencMB.levelFive}"
                 			  rowKey="#{levelFive.id}" 
                 			  selection="#{levelNomencMB.selectedLevelFive}"
                 			  selectionMode="single"
                 			  paginator="true" 
                 			  paginatorPosition="bottom" 
                 			  rows="10" 
       						  style="width:250px;border:0;">   

			        <p:columnGroup type="header">  
			           <p:row>  
			                <p:column colspan="2"  style="text-align:left"  headerText="#{levelNomencMB.titleLevelFive}" />  
			           </p:row>
			        </p:columnGroup>       
			        
			        <p:column style="width:110px">  
			    	    <h:outputText value="#{levelFive.nom}" />  
			        </p:column>  
			        
			        <p:column style="width:25px;">  
			          		 <p:commandButton  style="width:20px;height:20px" id="editLevelFive"   icon="ui-icon-pencil" title="Editer">  
			                     <f:setPropertyActionListener value="#{levelFive}" target="#{levelNomencMB.selectedLevelFive}" />  
			                 </p:commandButton>  
       						 <p:commandButton id="deleteLevelFive" style="width:20px;height:20px" title="Supprimer"  icon="ui-icon-circle-close" onclick="deleteLevelFiveValidationDialog.show()">  
			                     <f:setPropertyActionListener value="#{levelFive}" target="#{levelNomencMB.selectedLevelFive}" />  
			                 </p:commandButton>  			        
  
			        </p:column>  
    			 </p:dataTable>
        	  </td>
        	  </c:if>
       </tr>
     </table>
       <c:if test="${levelNomencMB.levelofNomenclature != 2}">
      <p:dialog header="Ajouter un nouveau secteur "  id="addSecteur" widgetVar="addSecteur" modal="true" showEffect="explode" hideEffect="explode" resizable="false">  
                  
                    <p:spacer width="10"/>Nom:<p:spacer width="54"/><br></br>
                    <p:spacer width="10"/><h:inputText id="nomSecteur" value="#{levelNomencMB.nomencsec.nom}" />
                    <br></br>
                    <p:spacer width="10"/> Code:<p:spacer width="50"/><br></br>
                    <p:spacer width="10"/><h:inputText id="codeSecteur" value="#{levelNomencMB.nomencsec.code}"/>
                    <br></br>
                    <br></br>
		                <p:commandButton id="canceladdSecteur" value="Annuler" onclick="addSecteur.hide()" />
		                <p:commandButton id="addOrSaveSecteur" value="Enregistrer" oncomplete="addSecteur.hide()" update=":form:idlevelOneTable" actionListener="#{levelNomencMB.addLevelOne}"/> 
       </p:dialog> 
       </c:if>
       <p:dialog header="Ajouter un nouveau Rayon " id="addRayon"  widgetVar="addRayon" modal="true" showEffect="explode" hideEffect="explode" resizable="false">  
                  
                    <p:spacer width="10"/>Nom:<p:spacer width="54"/><br></br>
                    <p:spacer width="10"/><p:inputText id="nomRayon"  value="#{levelNomencMB.nomencray.nom}"  />
                    <br></br>
                    <p:spacer width="10"/> Code:<p:spacer width="50"/><br></br>
                    <p:spacer width="10"/><p:inputText id="codeRayon" value="#{levelNomencMB.nomencray.code}"/>
                    <br></br>
                    <br></br>
	                <div align="center"> 
		                <p:commandButton id="canceladdRayon" value="Annuler" onclick="addRayon.hide()" />
		                <p:commandButton id="addOrSaveRayon"  value="Enregistrer" oncomplete="addRayon.hide()" update=":form:idLevelTwoTable" actionListener="#{levelNomencMB.addLevelTwo}"/> 
                    </div>
       </p:dialog> 
        
        <c:if test="${levelNomencMB.levelofNomenclature == 4 or levelNomencMB.levelofNomenclature == 5 }">
        <p:dialog header="Ajouter un nouveau Sous-Rayon " id="addSousRayon"  widgetVar="addSousRayon" modal="true" showEffect="explode" hideEffect="explode" resizable="false">  
                  
                    <p:spacer width="10"/>Nom:<p:spacer width="54"/><br></br>
                    <p:spacer width="10"/><p:inputText id="nomSousRayon" value="#{levelNomencMB.nomencsousray.nom}"  />
                    <br></br>
                    <p:spacer width="10"/> Code:<p:spacer width="50"/><br></br>
                    <p:spacer width="10"/><p:inputText id="codeSousRayon"  value="#{levelNomencMB.nomencsousray.code}"/>
                    <br></br>
                    <br></br>
	                <div align="center"> 
		                <p:commandButton id="canceladdSousRayon" value="Annuler" onclick="addSousRayon.hide()" />
		                <p:commandButton id="addOrSaveSousRayon"  value="Enregistrer" oncomplete="addSousRayon.hide()" update=":form:idLevelThreeTable" actionListener="#{levelNomencMB.addLevelThree}"/> 
                    </div>
       </p:dialog> 
       </c:if>
       <p:dialog header="Ajouter une nouvelle Famille " id="addFamille"  widgetVar="addFamille" modal="true" showEffect="explode" hideEffect="explode" resizable="false">  
                  
                    <p:spacer width="10"/>Nom:<p:spacer width="54"/><br></br>
                    <p:spacer width="10"/><p:inputText id="nomFamille" value="#{levelNomencMB.nomencfam.nom}"  />
                    <br></br>
                    <p:spacer width="10"/> Code:<p:spacer width="50"/><br></br>
                    <p:spacer width="10"/><p:inputText id="codeFamille"  value="#{levelNomencMB.nomencfam.code}" />
                    <br></br>
                    <br></br>
	                <div align="center"> 
		                <p:commandButton id="canceladdFamille" value="Annuler" onclick="addFamille.hide()" />
		                <p:commandButton id="addOrSaveFamille"  value="Enregistrer" oncomplete="addFamille.hide()" update=":form:idLevelFourTable" actionListener="#{levelNomencMB.addLevelFour}"/> 
                    </div>
       </p:dialog> 
       <c:if test="${levelNomencMB.levelofNomenclature == 5}"> 
       <p:dialog header="Ajouter une nouvelle Sous Famille " id="addSousFamille"  widgetVar="addSousFamille" modal="true" showEffect="explode" hideEffect="explode" resizable="false">  
                  
                    <p:spacer width="10"/>Nom:<p:spacer width="54"/><br></br>
                    <p:spacer width="10"/><p:inputText id="nomSousFamille" value="#{levelNomencMB.nomencsousfam.nom}"  />
                    <br></br>
                    <p:spacer width="10"/> Code:<p:spacer width="50"/><br></br>
                    <p:spacer width="10"/><p:inputText id="codeSousFamille" value="#{levelNomencMB.nomencsousfam.code}" />
                    <br></br>
                    <br></br>
	                <div align="center"> 
		                <p:commandButton id="canceladdSousFamille" value="Annuler" onclick="addSousFamille.hide()" />
		                <p:commandButton id="addOrSaveSousFamille"  value="Enregistrer" oncomplete="addSousFamille.hide()" update="idLevelFiveTable" actionListener="#{levelNomencMB.addLevelFive}"/> 
                    </div>
       </p:dialog> 
       </c:if>
       
       	<p:confirmDialog  id="deleteLevelOneValidation" header="Suppression" severity="alert" resizable="false" 
     		    widgetVar="deleteLevelOneValidationDialog" modal="true" showEffect="explode" hideEffect="explode"
	       		message="Etes vous sur de vouloir supprimer la nomenclature #{levelOneRow.nom}?">  
	        <div align="right">  
	           <p:commandButton id="cancelLevOneNomenc" value="Annuler" onclick="deleteLevelOneValidationDialog.hide()" type="button" />
        	   <p:commandButton id="deleteLevOneNomenc" value="Supprimer" oncomplete="deleteLevelOneValidationDialog.hide()" action="#{levelNomencMB.deleteOneNomenclature}"/>
        	</div>
	    </p:confirmDialog> 
	   
     	<p:confirmDialog  id="deleteLevelTwoValidation" header="Suppression" severity="alert" resizable="false" 
     		    widgetVar="deleteLevelTwoValidationDialog" modal="true" showEffect="explode" hideEffect="explode"
	       		message="Etes vous sur de vouloir supprimer la nomenclature #{levelTwo.nom}?">  
	        <div align="right">  
	           <p:commandButton id="cancelLevTwoNomenc" value="Annuler" onclick="deleteLevelTwoValidationDialog.hide()" type="button" />
        	   <p:commandButton id="deleteLevTwoNomenc" value="Supprimer" oncomplete="deleteLevelTwoValidationDialog.hide()" action="#{levelNomencMB.deleteTwoNomenclature}"/>
        	</div>
	    </p:confirmDialog> 
	    
    	<p:confirmDialog  id="deleteLevelThreeValidation" header="Suppression" severity="alert" resizable="false" 
     		    widgetVar="deleteLevelThreeValidationDialog" modal="true" showEffect="explode" hideEffect="explode"
	       		message="Etes vous sur de vouloir supprimer la nomenclature #{levelThree.nom}?">  
	        <div align="right">  
	           <p:commandButton id="cancelLevThreeNomenc" value="Annuler" onclick="deleteLevelThreeValidationDialog.hide()" type="button" />
        	   <p:commandButton id="deleteLevThreeNomenc" value="Supprimer" oncomplete="deleteLevelThreeValidationDialog.hide()" action="#{levelNomencMB.deleteThreeNomenclature}"/>
        	</div>
	    </p:confirmDialog>
	    
       	<p:confirmDialog  id="deleteLevelFourValidation" header="Suppression" severity="alert" resizable="false" 
     		    widgetVar="deleteLevelFourValidationDialog" modal="true" showEffect="explode" hideEffect="explode"
	       		message="Etes vous sur de vouloir supprimer la nomenclature #{levelFour.nom}?">  
	        <div align="right">  
	           <p:commandButton id="cancelLevFourNomenc" value="Annuler" onclick="deleteLevelFourValidationDialog.hide()" type="button" />
        	   <p:commandButton id="deleteLevFourNomenc" value="Supprimer" oncomplete="deleteLevelFourValidationDialog.hide()" action="#{levelNomencMB.deleteFourNomenclature}"/>
        	</div>
	    </p:confirmDialog>
	    
    	<p:confirmDialog  id="deleteLevelFiveValidation" header="Suppression" severity="alert" resizable="false" 
     		    widgetVar="deleteLevelFiveValidationDialog" modal="true" showEffect="explode" hideEffect="explode"
	       		message="Etes vous sur de vouloir supprimer la nomenclature #{levelFive.nom}?">  
	        <div align="right">  
	           <p:commandButton id="cancelLevFiveNomenc" value="Annuler" onclick="deleteLevelFiveValidationDialog.hide()" type="button" />
        	   <p:commandButton id="deleteLevFiveNomenc" value="Supprimer" oncomplete="deleteLevelFiveValidationDialog.hide()" action="#{levelNomencMB.deleteFiveNomenclature}"/>
        	</div>
	    </p:confirmDialog>
	    
	   
       <br></br>
       <br></br>
       <p:commandButton  value="Passer à l’étape suivante" style="font-family:Times New Roman;color:white;background-color:#43ceff" action="#{levelNomencMB.redirect}" ajax="false"/>
       
    </h:form>
	</f:view>
 </ui:define>
 </ui:composition>